﻿<?xml version="1.0" encoding="utf-8"?><Articles><Article><ArticlesID>859</ArticlesID><Title>Căn bản về CSS</Title><Body>&amp;lt;p&amp;gt;Nếu bạn l&amp;amp;agrave; người thực sự muốn t&amp;amp;igrave;m hiểu về CSS, th&amp;amp;igrave; bạn kh&amp;amp;ocirc;ng thể kh&amp;amp;ocirc;ng  t&amp;amp;igrave;m hiểu c&amp;amp;aacute;ch viết giản lược (shorthand) trong CSS. C&amp;amp;aacute;ch viết n&amp;amp;agrave;y thực  sự mang lại những lợi &amp;amp;iacute;ch v&amp;amp;agrave; tiện lợi khi bạn sử dụng CSS. Trước khi đi  v&amp;amp;agrave;o ph&amp;amp;acirc;n t&amp;amp;iacute;ch những tiện lợi m&amp;amp;agrave; n&amp;amp;oacute; mang lại, t&amp;amp;ocirc;i xin lấy một v&amp;amp;iacute; dụ đơn  giản như sau. Giả sử rằng ch&amp;amp;uacute;ng ta muốn định dạng cho một thẻ c&amp;amp;oacute; đường  viền bao quanh th&amp;amp;igrave; ch&amp;amp;uacute;ng ta cần phải viết&amp;lt;/p&amp;gt;
&amp;lt;pre title=&amp;quot;code&amp;quot; class=&amp;quot;brush: css;&amp;quot;&amp;gt;
border-width: 1px;
border-style: solid;
border-color: #CC0000;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Thay v&amp;amp;igrave; phải viết như vậy ch&amp;amp;uacute;ng ta chỉ cần viết&amp;lt;/p&amp;gt;
&amp;lt;pre title=&amp;quot;code&amp;quot; class=&amp;quot;brush: css;&amp;quot;&amp;gt;
border: 1px solid #CC0000;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Qua v&amp;amp;iacute; dụ đơn giản ở tr&amp;amp;ecirc;n ta c&amp;amp;oacute; thể thấy c&amp;amp;aacute;ch viết n&amp;amp;agrave;y mang lại cho  ch&amp;amp;uacute;ng ta  một số lợi &amp;amp;iacute;ch sau&amp;lt;/p&amp;gt;
&amp;lt;ol&amp;gt;
    &amp;lt;li&amp;gt;Thứ nhất: n&amp;amp;oacute; gi&amp;amp;uacute;p ch&amp;amp;uacute;ng ta giảm thiểu được đ&amp;amp;aacute;ng kể thời gian phải  viết m&amp;amp;atilde;  CSS.&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Thứ hai: bạn cứ tưởng tượng rằng file CSS của bạn c&amp;amp;oacute; tới v&amp;amp;agrave;i ngh&amp;amp;igrave;n  d&amp;amp;ograve;ng v&amp;amp;agrave; dung lượng l&amp;amp;ecirc;n tới v&amp;amp;agrave;i trăm Kb, th&amp;amp;igrave; c&amp;amp;aacute;ch viết n&amp;amp;agrave;y c&amp;amp;ograve;n gi&amp;amp;uacute;p bạn  giảm thiểu được đ&amp;amp;aacute;ng kể dung lượng của file CSS v&amp;amp;agrave; gi&amp;amp;uacute;p bạn dễ d&amp;amp;agrave;ng theo  d&amp;amp;otilde;i hơn, khi số lượng d&amp;amp;ograve;ng của trang được giảm xuống.&amp;lt;/li&amp;gt;
&amp;lt;/ol&amp;gt;
&amp;lt;p&amp;gt;Sau đ&amp;amp;acirc;y t&amp;amp;ocirc;i xin đi v&amp;amp;agrave;o chi tiết một số thuộc t&amp;amp;iacute;nh trong CSs m&amp;amp;agrave; ch&amp;amp;uacute;ng  ta c&amp;amp;oacute;  thể d&amp;amp;ugrave;ng c&amp;amp;aacute;ch viết giản lược.&amp;lt;/p&amp;gt;
&amp;lt;h3&amp;gt;1. Thuộc t&amp;amp;iacute;nh Color&amp;lt;/h3&amp;gt;
&amp;lt;p&amp;gt;C&amp;amp;oacute; rất nhiều c&amp;amp;aacute;ch để định nghĩa một m&amp;amp;agrave;u trong CSS, ch&amp;amp;uacute;ng ta c&amp;amp;oacute; thể  định nghĩa theo hệ số Hexa(trong hệ m&amp;amp;agrave;u RGB), hoặc ch&amp;amp;uacute;ng ta c&amp;amp;oacute; thể viết  t&amp;amp;ecirc;n m&amp;amp;agrave;u (v&amp;amp;iacute; dụ: white, red&amp;amp;hellip;). Nhưng c&amp;amp;aacute;ch định nghĩa theo hệ số Hexa được  sử dụng th&amp;amp;ocirc;ng dụng nhất. Để định nghĩa theo hệ Hexa ch&amp;amp;uacute;ng ta sẽ đặt dấu  (#) ở trước sau đ&amp;amp;oacute; đến c&amp;amp;aacute;c th&amp;amp;ocirc;ng số m&amp;amp;agrave;u (v&amp;amp;iacute; dụ: #003366). D&amp;amp;atilde;y c&amp;amp;aacute;c th&amp;amp;ocirc;ng  số m&amp;amp;agrave;u được chia l&amp;amp;agrave;m 3 phần tương ứng với ba m&amp;amp;agrave;u Red, Green, Blue (00:  Red | 33: Green | 66: Blue). Trong c&amp;amp;aacute;ch định nghĩa hệ số m&amp;amp;agrave;u ta cũng c&amp;amp;oacute;  c&amp;amp;aacute;ch viết giản lược như sau: &amp;lt;strong&amp;gt;#000000&amp;lt;/strong&amp;gt; c&amp;amp;oacute; thể viết &amp;lt;strong&amp;gt;#000&amp;lt;/strong&amp;gt;  hoặc  &amp;lt;strong&amp;gt;#003366&amp;lt;/strong&amp;gt; c&amp;amp;oacute; thể viết &amp;lt;strong&amp;gt;#036&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;h3&amp;gt;2. Thuộc t&amp;amp;iacute;nh margin v&amp;amp;agrave; padding.&amp;lt;/h3&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Được thay thế bằng&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
margin: 10px 15px 20px 25px; /* top | right | bottom | left */&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Tương tự với thuộc t&amp;amp;iacute;nh padding&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
padding-top: 10px;
pading-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding: 10px 15px 20px 25px; /* top | right | bottom | left */&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Cả hai thuộc t&amp;amp;iacute;nh margin v&amp;amp;agrave; padding c&amp;amp;oacute; hai ch&amp;amp;uacute; &amp;amp;yacute; như sau: nếu trong  trường  hợp c&amp;amp;oacute; hai th&amp;amp;ocirc;ng số.&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
margin: 10px 20px; /* top bottom | right left */
padding: 10px 20px; /* top bottom | right left */&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Th&amp;amp;igrave; th&amp;amp;ocirc;ng số thứ nhất tương đương với &amp;lt;strong&amp;gt;top&amp;lt;/strong&amp;gt; v&amp;amp;agrave;  &amp;lt;strong&amp;gt;bottom&amp;lt;/strong&amp;gt;  c&amp;amp;ograve;n th&amp;amp;ocirc;ng số thứ hai tương đương với  &amp;lt;strong&amp;gt;right&amp;lt;/strong&amp;gt; v&amp;amp;agrave; &amp;lt;strong&amp;gt;left&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Trong trường hợp &amp;lt;strong&amp;gt;margin&amp;lt;/strong&amp;gt; v&amp;amp;agrave; &amp;lt;strong&amp;gt;padding&amp;lt;/strong&amp;gt; c&amp;amp;oacute; 3   th&amp;amp;ocirc;ng số:&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
margin: 10px 20px 15px; /* top | right left | bottom */
padding: 10px 20px 15px; /* top | right left | bottom */&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Th&amp;amp;igrave; th&amp;amp;ocirc;ng số thứ nhất tương đương với &amp;lt;strong&amp;gt;top&amp;lt;/strong&amp;gt;, th&amp;amp;ocirc;ng số  thứ hai  tương đương với &amp;lt;strong&amp;gt;right&amp;lt;/strong&amp;gt; v&amp;amp;agrave; &amp;lt;strong&amp;gt;left&amp;lt;/strong&amp;gt;,  th&amp;amp;ocirc;ng số thứ 3  tương đương với &amp;lt;strong&amp;gt;bottom&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;h3&amp;gt;3. Thuộc t&amp;amp;iacute;nh border.&amp;lt;/h3&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
border-with: 1px;
border-style: solid;
border-color: #CC0000;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Sẽ viết th&amp;amp;agrave;nh&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
border: 1px solid #CC0000; /* width | style | color */&amp;lt;/pre&amp;gt;
&amp;lt;h3&amp;gt;4. Thuộc t&amp;amp;iacute;nh background.&amp;lt;/h3&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
background-color: #CC0000;
background-image: (image url);
background-repeat: no-repeat; /* repeat-x, repeat-y */
background-position: top left;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Tương đương với&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
background: #CC0000 url('/image url') no-repeat top left;&amp;lt;/pre&amp;gt;
&amp;lt;h3&amp;gt;5. Thuộc t&amp;amp;iacute;nh font&amp;lt;/h3&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
font-size: 1em;
line-height: 1.5em;
font-variant:small-caps;
font-weight: bold;
font-style: italic;
font-famyli: Arial, Verdana, Sans-serif;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Dạng viết giản lược&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
font: 1em/1.5em bold italic small-caps Arial,Verdana,Sans-serif;&amp;lt;/pre&amp;gt;
&amp;lt;h3&amp;gt;5. List type&amp;lt;/h3&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
list-style: none;

/*c&amp;amp;oacute; nghĩa l&amp;amp;agrave;*/

list-style-type: none;
&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Bạn cũng c&amp;amp;oacute; thể sử dụng thuộc t&amp;amp;iacute;nh list-style-position v&amp;amp;agrave;  list-type-image để định dạng cho danh s&amp;amp;aacute;ch kh&amp;amp;ocirc;ng c&amp;amp;oacute; thứ tự unordered  lists, sử dụng h&amp;amp;igrave;nh ảnh cho mỗi d&amp;amp;ograve;ng v&amp;amp;agrave; sử dụng list-type-style l&amp;amp;agrave; h&amp;amp;igrave;nh  vu&amp;amp;ocirc;ng trong trường hợp kh&amp;amp;ocirc;ng hiển thị được ảnh. V&amp;amp;agrave; hai c&amp;amp;aacute;ch viết dưới  đ&amp;amp;acirc;y l&amp;amp;agrave; như nhau.&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
list-style:square inside url('/image.gif');&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;l&amp;amp;agrave; giản lược cho&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
list-style-type: square;
list-style-position: inside;
list-style-image: url('/image.gif');&amp;lt;/pre&amp;gt;
&amp;lt;h3&amp;gt;6. Outline&amp;lt;/h3&amp;gt;
&amp;lt;p&amp;gt;Thuộc t&amp;amp;iacute;nh n&amp;amp;agrave;y rất &amp;amp;iacute;t d&amp;amp;ugrave;ng v&amp;amp;igrave; c&amp;amp;oacute; rất &amp;amp;iacute;t c&amp;amp;aacute;c tr&amp;amp;igrave;nh duyệt hiện tại hỗ trợ  thuộc t&amp;amp;iacute;nh n&amp;amp;agrave;y, hiện tại chỉ c&amp;amp;oacute; một số tr&amp;amp;igrave;nh duyệt hỗ trợ thuộc t&amp;amp;iacute;nh n&amp;amp;agrave;y  Safari, OmniWeb v&amp;amp;agrave; Opera. C&amp;amp;aacute;ch viết giản lược c&amp;amp;aacute;c thuộc t&amp;amp;iacute;nh n&amp;amp;agrave;y như  sau:&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
outline-color: #000;
outline-style: solid;
outline-with: 2px;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;C&amp;amp;aacute;ch viết giản lược sẽ l&amp;amp;agrave;&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
outline: #000 solid 2px;&amp;lt;/pre&amp;gt;
&amp;lt;p style=&amp;quot;text-align: right;&amp;quot;&amp;gt;&amp;lt;em&amp;gt;Sưu tầm&amp;lt;/em&amp;gt;&amp;lt;/p&amp;gt;</Body><CommentEnabled>True</CommentEnabled><ViewCount>0</ViewCount><ReleaseDate>3/21/2010 9:34:52 AM</ReleaseDate><TotalComment>0</TotalComment><IsMedia>False</IsMedia><IsPicture>False</IsPicture><IsVote>True</IsVote><ArticlePassword /><PostVisible>0</PostVisible><ArticlePath>/2010/3/21/Can-ban-ve-CSS-35B</ArticlePath><Approved>True</Approved><ImagePath /><CategoryId>29</CategoryId><ArrayCatID>29|25</ArrayCatID></Article></Articles>